<template>
  <div class="news-detail">
    <div class="container" style="margin-top: 100px; padding-bottom: 80px">
      <article class="news-article">
        <h1>{{ news.title }}</h1>
        <div class="news-meta">
          <span>{{ news.publish_time?.split('T')[0] }}</span>
          <span>作者: {{ news.author || '未知' }}</span>
          <span>浏览 {{ news.view_count }}</span>
        </div>
        <img v-if="news.cover_image" :src="news.cover_image" :alt="news.title" class="news-cover" />
        <div class="news-content" v-html="news.content"></div>
      </article>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { getNewsDetail } from '@/api/portal'
import type { News } from '@/types'

const route = useRoute()
const news = ref<News>({} as News)

const fetchDetail = async () => {
  try {
    const id = Number(route.params.id)
    const res = await getNewsDetail(id)
    news.value = res.data
  } catch (error) {
    console.error('获取新闻详情失败', error)
  }
}

onMounted(() => {
  fetchDetail()
})
</script>

<style scoped lang="scss">
.news-article {
  max-width: 800px;
  margin: 0 auto;

  h1 {
    font-size: 36px;
    margin-bottom: 24px;
    line-height: 1.4;
  }

  .news-meta {
    display: flex;
    gap: 24px;
    color: var(--text-tertiary);
    font-size: 14px;
    padding-bottom: 24px;
    border-bottom: 1px solid #f0f0f0;
    margin-bottom: 32px;
  }

  .news-cover {
    width: 100%;
    border-radius: 8px;
    margin-bottom: 32px;
  }

  .news-content {
    font-size: 16px;
    line-height: 1.8;
    color: var(--text-primary);
  }
}
</style>

